import React, { Component } from 'react'
import './index.css'

export default class TodoList extends Component {
  state = {
    jobList: [{ id: 1, name: '睡觉', done: true }],
    mouse: false,
  }

  pushData = (event) => {
    if (event.keyCode === 13) {
      if (event.target.value.trim() === '') {
        alert('输入不能为空')
        return
      }
      let { jobList } = this.state
      var isRepeat = false
      jobList.map((item) => {
        if (event.target.value === item.name) {
          isRepeat = true
        }
      })
      if (isRepeat) {
        alert('数据已存在')
        return
      }
      jobList.push({ id: jobList.length + 1, name: event.target.value, done: false })
      this.setState({ jobList, thing: null })
      event.target.value = ''
    }
  }

  handleMouse = (flag) => {
    return () => {
      this.setState({mouse: flag})
    }
  }

  changeDone = (id) => {
    return (event) => {
    }
  }

  render() {
    const {mouse} = this.state
    return (
      <div className="todo-container">
        <div className="todo-wrap">
          <div className="todo-header">
            <input type="text" onKeyUp={this.pushData} placeholder="请输入你的任务名称，按回车键确认" />
          </div>
          <ul className="todo-main">
            {this.state.jobList.map((item) => {
              return (
                <li key={item.id} style={{backgroundColor: mouse?'#ddd':'#fff'}} onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)}>
                  <label>
                    <input type="checkbox" onChange={this.changeDone(item.id)} defaultChecked={item.done} />
                    <span>{item.name}</span>
                  </label>
                  <button className="btn btn-danger" style={{ display: mouse?'block':'none' }}>
                    删除
                  </button>
                </li>
              )
            })}
          </ul>
          <div className="todo-footer">
            <label>
              <input type="checkbox" />
            </label>
            <span>
              <span>已完成{this.state.jobList.filter((item) => item.done).length}</span> / 全部{this.state.jobList.length}
            </span>
            <button className="btn btn-danger">清除已完成任务</button>
          </div>
        </div>
      </div>
    )
  }
}
